<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 内容 -->
    <ul class="Order_adm_ul dipW clearfix">
			<li class="taskdilate_li_box dipW clearfix" v-for="(items,index) in tasldilate" :key="index">
				<h5 class="taskdilate_li_title">{{items.title}}</h5>
				<div class="taskdilate_li_con">
					<img :src="'./static/images/task/'+items.scr+''" alt="" v-if="items.blobk" class="taskdilate_li_child">
					<section v-if="items.none" class="taskdilate_li_child">
						<video id="videoA" class="taskdilate_li_video" :poster="'./static/images/task/'+items.scr+''"  controls="controls" webkit-playsinline="true">
              <!-- <source
                :src="'./static/images/task/'+items.video+''" 
                controls = "true"
                :poster="'./static/images/task/'+items.scr+''"
                preload="auto" 
                webkit-playsinline="true"
                playsinline="true" 
                x-webkit-airplay="allow" 
                x5-video-player-type="h5"  
                x5-video-player-fullscreen="true"
                x5-video-orientation="portraint"
                class="taskdilate_li_video"
              /> -->
              <source :src="'./static/images/task/'+items.video+''" class="taskdilate_li_videochild"/>
						</video>
					</section>
				</div>
				<p class="taskdilate_li_text">{{items.text}}</p>
			</li>
    </ul>
  </div>
</template>
<script>
// import 'video.js/dist/video-js.css'
// import { videoPlayer } from 'vue-video-player'

import Nav from '../mallConent/mallTopNav'
export default {
  data(){
    return{
      urls:{
        url:'/bomNav/taskContent',
        text:'广告种类说明',
			},
			tasldilate:[
				{
					title:'海报',
					scr:'hoaibao.jpg',
					text:'通过版面的构成在第一时间内将人们的目光吸引,让观看者获得 瞬间的刺激。创意师会主动联系您,根据您所属的行业和您的需 求制专属于您绝对原创的宣传海报。价格分为300元、500元、700元三个档次,价格取决于创意师海报设计的原创程度。',
					none:false, //视频
					blobk:true, //图片
				},
				{
					title:'图片宣传片',
					scr:'images_type.jpg',
					text:'通过以图片轮播+音频的方式制作宣传片，吸睛度高。创意师会主动联系您，根据您所属的行业和您的需求制专属于您绝对原创的宣传片，时长为15秒。价格约为2000元，具体价格创意师可以和您进行协商。',
					none:true, 
					blobk:false,
					video:'db92aca806a2be51ff3839ab312717a6.mp4',
				},
				{
					title:'实拍宣传片',
					scr:'shipai.jpg',
					text:'上门实拍，用采访消费者或展示店铺风采的方式制作，根据您所属的行业和您的需求制专属于您绝对原创的宣传片，时长为15秒。价格约为3000元，具体价格创意师可以和您进行协商。',
				  none:true, 
					blobk:false,
					video:'db92aca806a2be51ff3839ab312717a6.mp4',
				},
				{
					title:'动画宣传片',
					scr:'trantion.jpg',
					text:'用大众最容易接受的Q版动画制作宣传片，易吸引用户。根据您所属的行业和您的需求制专属于您绝对原创的宣传片，时长为15秒。价格约为5000元，具体价格创意师可以和您进行协商。',
					none:true, 
					blobk:false,
					video:'db92aca806a2be51ff3839ab312717a6.mp4',
				}
			],
    }
  }
  ,methods:{
		onPlayerPlay(player) { // 无用
			// 	// console.log('player play!', player)
			// },
			// onPlayerPause(player) {
			// 	// console.log('player pause!', player)
			// },
			// onPlayerEnded(player) {
			// 	// console.log('player ended!', player)
			// },
			// onPlayerLoadeddata(player) {
			// 	// console.log('player Loadeddata!', player)
			// },
			// onPlayerWaiting(player) {
			// 	// console.log('player Waiting!', player)
			// },
			// onPlayerPlaying(player) {
			// 	// console.log('player Playing!', player)
			// },
			// onPlayerTimeupdate(player) {
			// 	// console.log('player Timeupdate!', player.currentTime())
			// },
			// onPlayerCanplay(player) {
			// 	// console.log('player Canplay!', player)
			// },
			// onPlayerCanplaythrough(player) {
			// 	// console.log('player Canplaythrough!', player)
			// },
			// // or listen state event
			// playerStateChanged(playerCurrentState) {
			// 	// console.log('player current update state', playerCurrentState)
			// },
			// // player is ready
			// playerReadied(player) {
			// 	// seek to 10s
			// 	console.log('example player 1 readied', player)
			// 	player.currentTime(10)
			// 	// console.log('example 01: the player is readied', player)
    },
    // videoUP(){
    //   console.log(22)
    //     var video = document.querySelector('#videoA');
    //     this.getStyle(video,attr).style.height = '100%';
    //     this.getStyle(video,attr).style.left = '0%';
    //     this.getStyle(video,attr).style.top = '0%';
    // },
    // getStyle(ele,attr){  
    //   if(window.getComputedStyle){  
    //       return window.getComputedStyle(ele,false)[attr];  
    //   }else{  
    //       return ele.currentStyle[attr];  
    //   }  
    // } 
	}
	,components:{
		Nav,
	} //引入组件
  ,created(){
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  }
}
</script>
<style lang="scss">
.video-player{
	width: 100% !important;
	height: 100% !important;
	.video-js{
		// padding-top: 47.25% !important;
		width: 100% !important ;
		height: 100% !important;
		.vjs-big-play-button{
			top: 50% !important ;
			left:50% !important ;
			width: 1rem;
			height: 1rem;
			-webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%) !important ;
     -moz-transform: translateX(-50%) translateY(-50%) !important ; 
      -ms-transform: translateX(-50%) translateY(-50%) !important ;
       -o-transform: translateX(-50%) translateY(-50%) !important ;
          transform: translateX(-50%) translateY(-50%) !important ;
		}
	}
 
}
</style>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
	// background: #f2f2f2;
		background: #fff;
  // position: fixed;
}
.Order_adm_ul{
	margin-top:.8rem;
	position: relative;
	padding:0rem .4rem;
	width: 100%;
	height: 100%;
	.taskdilate_li_box{
		width: 100%;
		border-bottom:.02rem solid #f2f2f2;
		.taskdilate_li_title{
			width: 100%;
			padding:.38rem 0rem;
			font-size: .28rem;
			color:#ff7200;
			font-weight: 600;
			text-align: center;
			text-shadow: 0.1em 0.1em 0.05em #cec7c7;
		}
		.taskdilate_li_con{
			width: 100%;
      height: 3rem;
			.taskdilate_li_child{
				width: 100%;
        height: 100%;
        // overflow: hidden;
        // position: relative;
        // -webkit-user-select: none; 
        // user-select: none;
				.taskdilate_li_video{
          width: 100%;
          height: 100%;
          // height: 150%;
          // margin:0 !important;
          // position: absolute;
          // top:-25%;
          // left:0;
          video::-internal-media-controls-enclosure{

          }
          .taskdilate_li_videochild{
            width: 100%;
            height: 100%;
            margin:0 !important;
          }
				}
			}
		}
		.taskdilate_li_text{
			color:#666666;
			font-size: .22rem;
			font-family: 'Microsoft YaHei';
			text-align: left;
			padding:.38rem 0rem;
			// font-weight: bold;
			line-height:.4rem;
			letter-spacing:.02rem;
		}
	}
}
</style>
